<template>
  <div class="stock-flow">
    <d2-container type="card" betterScroll class="aside-container">
      <el-form
        class="query-form"
        :label-position="'top'"
        label-width="80px"
        :model="queryForm"
        ref="queryForm"
        :rules="queryRules"
        @submit.native.prevent="handleSubmitQuery"
      >
        <el-form-item>
          <el-button type="ghost" size="small" @click="handleResetQuery"
            >重置</el-button
          >
          <el-button
            native-type="submit"
            size="small"
            type="primary"
            icon="el-icon-search"
            :loading="loading"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item label="订单号" prop="billNo">
          <el-input
            placeholder="请输入订单号搜索"
            v-model.trim="queryForm.billNo"
            size="small"
          ></el-input>
        </el-form-item>
      </el-form>
    </d2-container>
    <d2-container class="main-container">
      <template slot="header">
        <div class="header-title">采购单</div>
        <el-button type="warning" size="small" @click="handleAddOrder"
          >添加采购单</el-button>
      </template>
      <el-table
        class="query-form"
        :label-position="'top'"
        label-width="80px"
        v-loading="loading"
        :data="tableData"
        row-key="id"
        stripe
        border
        size="small"
        :default-expand-all="false"
        :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }"
      >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-card>
              <el-table
                v-loading="scope.row.loading"
                size="mini"
                :data="scope.row.detail"
                :header-cell-style="{
                  background: '#f2f3f7',
                  color: '#333',
                  textAlign: 'center',
                }"
                border
              >
                <el-table-column
                  prop="sku"
                  how-overflow-tooltip
                  label="商品编码"
                  align="center"
                  width="120"
                />
                <el-table-column
                  prop="skuName"
                  how-overflow-tooltip
                  label="商品名称"
                  align="center"
                  width="280"
                />
                <el-table-column
                  prop="unitCost"
                  how-overflow-tooltip
                  label="采购单价"
                  align="center"
                  width="100"
                />
                <el-table-column
                  prop="totalCost"
                  how-overflow-tooltip
                  label="采购总价"
                  align="center"
                  width="100"
                />
                <el-table-column
                  prop="purchaseNum"
                  how-overflow-tooltip
                  label="采购数量"
                  align="center"
                  width="100"
                />
                <el-table-column
                  prop="remark"
                  how-overflow-tooltip
                  label="备注"
                />
                <el-table-column
                  prop="unit"
                  how-overflow-tooltip
                  label="单位"
                  align="center"
                  width="80"
                />
              </el-table>
            </el-card>
          </template>
        </el-table-column>
        <el-table-column prop="billNo" label="订单号" min-width="140" />
        <el-table-column
          prop="supplierName"
          label="采购供应商"
          min-width="200"
        />
<!--        <el-table-column-->
<!--          prop="purchaseUserName"-->
<!--          align="center"-->
<!--          label="采购员"-->
<!--          width="90"-->
<!--        />-->
        <el-table-column
          prop="storeName"
          align="center"
          label="采购大仓"
          width="120"
        />
        <el-table-column label="状态" align="center" width="85">
          <template slot-scope="scope">
            <el-tag size="mini">{{ purchaseStatus[scope.row.status] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
<!--        <el-table-column prop="examineUserName" align="center" label="审批人" />-->
        <el-table-column
          prop="examineTime"
          align="center"
          label="审批时间"
          width="130"
        />
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
          width="130"
        />
        <el-table-column width="100" fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">
              <span>
                <el-link
                  style="font-size: 13px"
                  type="primary"
                  @click="audit(scope.row.id)"
                >审核</el-link>
                <span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
                <el-link
                  style="font-size: 13px"
                  type="primary"
                  @click="handleCancelDialog(scope.row.id)"
                >取消</el-link>
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="queryForm.pageNum"
        :page-size="queryForm.pageSize"
        :total="total"
        background
        layout="total, prev, pager, next"
        @current-change="pageCurrentChange"
      >
      </el-pagination>
      <el-dialog
        width="400px"
        :visible.sync="currRejectDialog"
        title="取消订单"
      >
        <div class="dialog-container">
          <span>取消理由</span>
          <el-input
            style="width: 200px; margin-left: 16px"
            placeholder="请填写取消理由"
            v-model.trim="currReject.cancelReason"
            size="small"
            maxlength="30"
          ></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="currRejectDialog = false" size="small"
            >取 消</el-button
          >
          <el-button type="primary" size="small" @click="handleCancelOrder"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </d2-container>
  </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'stock-flow',
  data() {
    return {
      loading: false,
      total: 0,
      queryForm: {
        billNo: '',
        createTimeEnd: '',
        createTimeStart: '',
        endTime: '',
        pageNum: 1,
        pageSize: 10,
        sku: '',
        skuName: '',
        storeCode: '',
        queryDate: '',
      },
      pickerOptions: {},
      tableData: [],
      queryRules: {
        billNo: [
          {
            required: false,
            trigger: 'blur',
          },
        ],
      },
      purchaseStatus: {
        0: '待审核',
        1: '审核通过',
        2: '到货异常',
        3: '已完成',
        9: '已取消',
      },
      currReject: {
        id: '',
        cancelReason: '',
      },
      currRejectDialog: false,
    }
  },
  created() {
    this.fetchStockFlowList()
  },
  methods: {
    handleSubmitQuery() {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          this.fetchStockFlowList()
        } else {
          return false
        }
      })
    },
    handleResetQuery() {
      this.$refs['queryForm'].resetFields()
      this.fetchStockFlowList()
    },
    fetchStockFlowList() {
      this.loading = true
      const query = Object.assign({}, this.queryForm, {})
      api
        .STOCK_PURCHASE_LIST(query)
        .then((response) => {
          this.loading = false
          this.tableData = response.list
          this.total = response.totalCount
          this.queryForm.pageNum = response.currPage
          this.queryForm.pageSize = response.pageSize
        })
        .catch(() => {
          this.loading = false
        })
    },
    handleAddOrder() {
      this.$router.push('/stock/add-purchase')
    },
    handleCancelOrder() {
      if (!this.currReject.cancelReason) {
        return this.$message.error('请填写取消理由')
      }
      api.STOCK_PURCHASE_CANCEL(this.currReject).then(() => {
        this.$message.success('操作成功')
        this.currRejectDialog = false
        this.fetchStockFlowList()
      })
    },
    handleCancelDialog(id) {
      this.currReject.id = id
      this.currReject.cancelReason = ''
      this.currRejectDialog = true
    },
    pageCurrentChange(val) {
      this.queryForm.pageNum = val
      this.fetchStockFlowList()
    },
    audit(id) {
      this.loading = true
      this.$confirm('是否确定审核通过?', '审核提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = false
        console.log(id)
        api.STOCK_PURCHASE_UPDATE_STATUS({
          id: id,
          type: 'audit'
        }).then(() => {
          this.loading = false
          this.$message({
            type: 'success',
            message: '已通过审核'
          });
          setTimeout(() => {
            this.fetchStockFlowList()
          }, 300)
        })
      }).catch(() => {
        this.loading = false
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  }
}
</script>

<style lang="scss">
.stock-flow {
  height: 100%;
}
.header-title {
  margin-bottom: 12px;
}
.aside-container {
  .query-form {
    .el-form-item__content {
      text-align: center;
    }
  }
}
</style>
